﻿/* Barra de tarefas -----------------------------------------------------*/

.light-purple   {background-color: #C048EE ;}
.dark-purple    {background-color: #6C1BC4 ;}
.medium-purple  {background-color: #B582EC ;}
                                   
.light-green    {background-color: #C3EB97 ;}
.dark-green     {background-color: #15DB15 ;}
.medium-green   {background-color: #6ED56E ;}
                                   
.light-orange   {background-color: #E7A477 ;}
.dark-orange    {background-color: #FF5E12 ;}
.medium-orange  {background-color: #E7A477 ;}

/* Barra de tarefas -----------------------------------------------------*/
body { overflow: hidden; }

.logo {
    height: 40px;
    position: relative;
    bottom: 2px;    
}

.logoMusicallis {
    height: 40px;
    position: relative;
    bottom: 2px;
    right: 340px;    
}

.indexMusicallis { width: 240px; }

.navbar .btn.btn-inverse {
    position: relative;
    right: 340px;
}

.nav-collapse.collapse {
    position: relative;
    left: 300px;
}

/* Barra de tarefas - Botões de Cores -----------------------------------------------------*/

.colorPurple,
.colorGreen,
.colorOrange {    
    border: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
}

.colorPurple:active,
.colorGreen:active,
.colorOrange:active  {
    cursor:pointer;
    position:relative;
    top:2px;
}

.colorPurple { background:#9657DA; }
.colorGreen { background:#92E473; }
.colorOrange { background:#F3943E; }

.colorBlock { position: relative; right: 340px; top: 8px; }


/* Ícones do Dashboard -----------------------------------------------------*/
.span3 .well {
    width: 230px;
    height: 707px;
}

.nav-list .nav-header { text-align: center; }
.nav.nav-list .photoProfile    { margin-bottom: 20px; padding-left: 30px; padding-top: 20px; width: 140px !important;  }

.nav .nav-list .selection { margin: 0px; }
.well .selection a { height: 40px; line-height: 40px; width: 73%; padding-left: 70px !important; }

.selection span {
    background-repeat: no-repeat;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    margin-top: 6px;
}

.selection .red-music    { background-image: url("../images/dashboard/ico-red-music.png"); }
.selection .red-playlist { background-image: url("../images/dashboard/ico-red-play.png"); }
.selection .red-profile  { background-image: url("../images/dashboard/ico-red-profile.png"); }
.selection .red-friends  { background-image: url("../images/dashboard/ico-red-friends.png"); }
.selection .red-forum    { background-image: url("../images/dashboard/ico-red-forum.png"); }
.selection .red-config   { background-image: url("../images/dashboard/ico-red-config.png"); }
.selection .red-contact  { background-image: url("../images/dashboard/ico-red-contact.png"); }

.selection .green-music    { background-image: url("../images/dashboard/ico-green-music.png"); }
.selection .green-playlist { background-image: url("../images/dashboard/ico-green-play.png"); }
.selection .green-profile  { background-image: url("../images/dashboard/ico-green-profile.png"); }
.selection .green-friends  { background-image: url("../images/dashboard/ico-green-friends.png"); }
.selection .green-forum    { background-image: url("../images/dashboard/ico-green-forum.png"); }
.selection .green-config   { background-image: url("../images/dashboard/ico-green-config.png"); }
.selection .green-contact  { background-image: url("../images/dashboard/ico-green-contact.png"); }

.selection .yellow-music    { background-image: url("../images/dashboard/ico-yellow-music.png"); }
.selection .yellow-playlist { background-image: url("../images/dashboard/ico-yellow-play.png"); }
.selection .yellow-profile  { background-image: url("../images/dashboard/ico-yellow-profile.png"); }
.selection .yellow-friends  { background-image: url("../images/dashboard/ico-yellow-friends.png"); }
.selection .yellow-forum    { background-image: url("../images/dashboard/ico-yellow-forum.png"); }
.selection .yellow-config   { background-image: url("../images/dashboard/ico-yellow-config.png"); }
.selection .yellow-contact  { background-image: url("../images/dashboard/ico-yellow-contact.png"); }

/* Login -----------------------------------------------------*/
.login {
    width: auto;
    position: relative;
    left: 50px;
    float: right;
    display: inline;
    color: #000;
}

.login form {
    margin: 0px;    
}

.login a,
.login form a {
    margin: 0px;
    color: #fff;    
}

/* Contato -----------------------------------------------------*/
.alert.box-contact a {
    color: #fff;
}

.box-contact {
    color: #EAEAEA;
    background: url("../images/dark.jpg");
    width: 86.8%;
    display: inline-block;
    margin-right: 6px;
    margin-bottom: -4px;
}
.box-contact header, .box-contact p { width: 75%; } 
.mack { 
    background: url("../images/dark.jpg");
    border-color: #fff;
    width: 6%; 
    height: 110px;
    display: inline-block;
    margin: 0px;
    position: relative;
    bottom: -24px;
}
.logoMack {
    background-image: url("../images/mack.gif");
    height: 110px;
    width: 110px;
    display: block;
    background-size: 110px;
    background-repeat: no-repeat;
}

/* Amigos -----------------------------------------------------*/
.bigBox {
    height: 710px;
    display: table;
    width: 1500px;
    margin-left: -170px;
    background-image: url("../images/clear.png");
}

.bigBox .contentFriends                                     { height: 90%; }
.bigBox .search-query                                       { width: 250px; }
.bigBox .searchFriends                                      { margin-top: 5px; }
.bigBox .navbar-inner .form-search                          { margin: 0px !important; width: 350px; position: relative; bottom: 5px; }
.bigBox .navbar-inner .nav.nav-pills                        { display: inline-block; width: 370px; margin: 0px; position: relative; top: 8px; left: 25px;}
.bigBox .navbar-inner .control-group .control-label,
.bigBox .navbar-inner .control-group .controls,
.bigBox .navbar-inner .control-group .input-prepend         { display: inline; }
.bigBox .navbar-inner .control-group .controls              { margin-left: 10px; position: relative; top: 7px;}
.bigBox .navbar-inner .control-group .controls .span2       { width: 180px; }
.bigBox .navbar-inner .control-group .controls .envelope    { background-image: url("../images/friends/envelope.png"); }
.bigBox .navbar-inner .control-group .control-label         { float: left; line-height: 28px; margin-top: 7px; }
.bigBox .navbar-inner .control-group button                 { margin-left: 10px; }
.bigBox .navbar-inner .control-group .sucess {
    padding: 0px 8px 0px 8px; 
    height: 28px; 
    position: relative; 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 
    border: 1px solid #FBEED5; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    color: #468847; 
    background-color: #DFF0D8; 
    border-color: #D6E9C6;
}

.bigBox .pager                                              { margin: -10px 4px; }
.bigBox .control-group                                      { margin: 0px; width: auto; display: inline; position: relative; float: right; line-height: 40px; top: 3px; }
.bigBox .navbar-inner                                       { line-height: 40px; }
 
.bigBox .row                          { height: 505px; margin: 0px !important; padding-top: 15px; }
.bigBox .row .bloc                    { width: 100%; height: 30%; display: block; padding-left: 9%; margin-top: 20px; }
.bigBox .row .bloc .department        { width: 30%; display: inline-block; padding-left: 10px; }
.bigBox .row .bloc .department p      { padding-left: 10px; width: 30%; }
.bigBox .row .bloc .department p:first-child { padding-top: 10px; }
.bigBox .row .bloc .department a:hover{ color: #fff; }
.bigBox .row .bloc .department .label { width: 280px; height: 22px; line-height: 22px; display: block; text-align: center; font-size: 13px; background-image: url("../images/dark.jpg"); }
.bigBox.well .alert.box-contact        { border-color: #fff; }

.photoFriends           { width: 11%; height: 10%; margin: 10px 0px 0px 0px;}
.photoFriends a         { height: 200px; }
.nameFriends            { width: 165px; margin-top: -28px; }
.nameFriends .label     { width: 157px; height: 20px; line-height: 20px; text-align: center; display: block;}

.nameFriends .add:hover { cursor: pointer; background-color: #168816; }
.nameFriends .del:hover { cursor: pointer; background-color: #C5100C; }   

.contentFriends li      { margin-left: 0px !important; margin-right: 25.7px; }
.contentFriends .ult    { margin-right: 0px !important; }

.friend-01, .friend-02, .friend-03, .friend-04, .friend-05, .friend-06, .friend-07, .friend-08, .friend-09, .friend-10, .friend-11,
.friend-12, .friend-13, .friend-14, .friend-15, .friend-16, .friend-17, .friend-18, .friend-19, .friend-20, .friend-21, .friend-22, .friend-23 {
    background-repeat: no-repeat;
    background-position-x: -28px;
    background-size: 210px;
}

.contentFriends .friend-01 { background-image: url("../images/friends/friend-01.jpg"); }
.contentFriends .friend-02 { background-image: url("../images/friends/friend-02.jpg"); }
.contentFriends .friend-03 { background-image: url("../images/friends/friend-03.jpg"); }
.contentFriends .friend-04 { background-image: url("../images/friends/friend-04.jpg"); }
.contentFriends .friend-05 { background-image: url("../images/friends/friend-05.jpg"); }
.contentFriends .friend-06 { background-image: url("../images/friends/friend-06.jpg"); }
.contentFriends .friend-07 { background-image: url("../images/friends/friend-07.jpg"); }
.contentFriends .friend-08 { background-image: url("../images/friends/friend-08.jpg"); }
.contentFriends .friend-09 { background-image: url("../images/friends/friend-09.jpg"); }
.contentFriends .friend-10 { background-image: url("../images/friends/friend-10.jpg"); }
.contentFriends .friend-11 { background-image: url("../images/friends/friend-11.jpg"); }
.contentFriends .friend-12 { background-image: url("../images/friends/friend-12.jpg"); }
.contentFriends .friend-13 { background-image: url("../images/friends/friend-13.jpg"); }
.contentFriends .friend-14 { background-image: url("../images/friends/friend-14.jpg"); }
.contentFriends .friend-15 { background-image: url("../images/friends/friend-15.jpg"); }
.contentFriends .friend-16 { background-image: url("../images/friends/friend-16.jpg"); }
.contentFriends .friend-17 { background-image: url("../images/friends/friend-17.jpg"); }
.contentFriends .friend-18 { background-image: url("../images/friends/friend-18.jpg"); }
.contentFriends .friend-19 { background-image: url("../images/friends/friend-19.jpg"); }
.contentFriends .friend-20 { background-image: url("../images/friends/friend-20.jpg"); }
.contentFriends .friend-21 { background-image: url("../images/friends/friend-21.jpg"); }
.contentFriends .friend-22 { background-image: url("../images/friends/friend-22.jpg"); }
.contentFriends .friend-23 { background-image: url("../images/friends/friend-23.jpg"); }

.contentFriends .unknown, .contentFriends .myFriends,
.contentFriends .friendsOfFriends, .contentFriends .newFriends, .new, .new-02 { display: none; }

/* PlayList e Musicas -----------------------------------------------------*/
.playBox {
    height: 710px;
    display: table;
    width: 1500px;
    margin-left: -170px;
    background-image: url("../images/clear.png");
}

.contentMusic li .queueMusic        { display: inline-block; width: 48px; height: 107%; border: none; background-image: url("../images/play.png"); background-repeat: no-repeat; }
.contentMusic li .queueMusic:hover  { cursor: pointer; }
.contentMusic li .music             { display: inline-block; width: 28%; height: 95%; margin-right: 41px;  border: 1px solid #8D8D8D; position: relative; bottom: 8px;}
.contentMusic .music .nMusic        { display: block; height: 45%; width: 80%; margin-left: 10px; color: #0D94CC; }
.contentMusic .music .nArtist       { display: block; height: 45%; width: 90%; margin-left: 10px; }
.contentMusic li .ult               { margin-right: 0px !important; }
.contentMusic li                    { height: 35%; width: 100%; margin: 10px 0px 0px 0px; line-height: 20px; }
.contentMusic .thumbnails           { height: 24%; }

.bigBox .contentMusic           { height: 72.5%; padding-top: 10px; }
.bigBox .contentPlay            { height: 22.5%; padding-top: 10px; }
.contentPlay .listMusic         { height: 11%; width: 7%; margin: 10px 0px 0px 0px;}
.contentPlay .listSave          { height: 11%; width: 7%; margin: 10px 0px 0px 0px;}
.contentPlay  a                 { height: 120px; width: 85px; margin-right: 10px;}
.contentPlay  a:hover           { background-image: url("../images/dark.jpg"); color: #8D8D8D;}
.contentPlay .listMusic .imageCD,
.contentPlay .listMusic .imageSave {
    height: 75px; 
    width: 83px; 
    display: block; 
    border: 1px solid #8D8D8D;
    background-color: silver; 
    background-repeat: no-repeat; 
    background-position: 10px;
}
.contentPlay .listMusic .imageCD { background-image: url("../images/CD.png"); }
.contentPlay .listMusic .imageSave { background-image: url("../images/plus.png"); }
.contentPlay a:hover, .contentPlay a:link, .contentPlay a:visited { text-decoration: none; }
.contentPlay .detailsMusic { border: 1px solid #8D8D8D; display: block; margin-top: 2px; height: 39px; text-align: center; color: #eaeaea; }
.contentPlay .detailsMusic:hover { color: #8D8D8D; }
.contentPlay .nameMusic { display: block; height: 19.5px; }
.contentPlay .nameArtist { display: block; height: 19.5px; }
.noMusic { display: none !important; }


.contentSocialMedia .listMusic .shareFacebook,
.contentSocialMedia .listMusic .shareTwitter,
.contentSocialMedia .listMusic .shareGoogle {
    height: 75px; 
    display: block; 
    background-repeat: no-repeat; 
    background-position: 10px;
    background-size: 78px;
    background-position-x: 3px;
}

.contentSocialMedia .listMusic                  { height: 11%; width: 7%; margin: 10px 0px 0px 0px;}
.contentPlayList li .ult                        { margin-right: 0px !important; }
.contentPlayList li                             { height: 35%; width: 100%; margin: 10px 0px 0px 0px; line-height: 20px; }
.contentPlayList .thumbnails                    { height: 24%; margin-left : -30px}
.contentSocialMedia .thumbnails                 { margin-left : -30px}

.bigBox .contentPlayList                        { height: 76%; padding-top: 10px; }
.bigBox .contentSocialMedia                     { height: 18%; padding-top: 10px; }
.contentSocialMedia  a                          { height: 100px; width: 85px; margin-right: 10px;}
.contentSocialMedia  a:hover                    { background-image: url("../images/dark.jpg"); color: #8D8D8D;}
.contentSocialMedia .listMusic .shareFacebook   { background-image: url("../images/social-media/green_facebook.png"); }
.contentSocialMedia .listMusic .shareTwitter    { background-image: url("../images/social-media/green_twitter.png"); }
.contentSocialMedia .listMusic .shareGoogle     { background-image: url("../images/social-media/green_google.png"); }
.contentSocialMedia .nameSocialMedia            { display: block; margin-top: 5px; height: 39px; text-align: center; color: #06C; }
.contentSocialMedia .nameSocialMedia:hover      { color: #fff; }
.contentSocialMedia a:hover, .contentPlay a:link,
.contentPlay a:visited { text-decoration: none; }

.contentPlayList li .queueMusic         { display: inline-block; width: 48px; height: 107%; border: none; background-image: url("../images/playList.png"); background-repeat: no-repeat; }
.contentPlayList li .queueMusic:hover   { cursor: pointer; }
.contentPlayList li .music              { display: inline-block; width: 28%; height: 95%; margin-right: 41px;  border: 1px solid #8D8D8D; position: relative; bottom: 8px;}
.contentPlayList .music .nMusic         { display: block; height: 45%; width: 80%; margin-left: 10px; color: #6DF554; }
.contentPlayList .music .nArtist        { display: block; height: 45%; width: 90%; margin-left: 10px; }
.contentPlayList li .ult                { margin-right: 0px !important; }
.contentPlayList li                     { height: 33%; width: 100%; margin: 10px 0px 0px 0px; line-height: 20px; }
.contentPlayList .thumbnails            { height: 24%; margin: 0px; }

.alert-share {
    width: 500px;
    display: block;
    margin-right: 12px;
    margin-top: 10px;
    height: 91px; 
    left: 25px;
    background-image: url("../images/dark.jpg");
    color: #fff;
    border-color: #000;
    text-shadow:none;
    text-align:justify;
    padding-left: 15px;
    padding-right: 15px;
}
.alert-share  a { color: #3A89FF; margin: 0px; }
.savePlayList span:hover { cursor: pointer; }

.alert-music {
    width: 200px;
    display: inline-block;
    height: 75px; 
    padding: 10px 10px 5px 10px;
    position: relative;
    top: 25px;
    right: 30px;
    background-image: url("../images/dark.jpg");
}

.alert-music .btn-inverse { margin-left: 5px; }
.alert-music .span3 { width: 200px; }
.contentPlay .thumbnails .alert-success { position: relative; top: 104px; right: 30px; }

/* Fórum -----------------------------------------------------*/
.contentSocialMedia .thumbnails.float { float: right; margin-right: -10px; }
.contentSocialMedia .listMusic .newForum {
    background-image: url("../images/newForum.png");
    height: 75px;
    width: 83px;
    display: block;
    background-repeat: no-repeat;
    background-position: 10px;
    background-size: 80px;
    background-position-x: 4px;
}
.contentSocialMedia .listMusic .newForum:hover { color: #fff; }

.pager.pForum { position: relative; float: right; top: 130px;}
.pager.pForum .next { margin-left: 10px; }
.lForum .music { width: 50px; }
.contentPlayList .lForum .music { display: inline-block; width: 93%; height: 95%; margin-right: 41px;  border: 1px solid #8D8D8D; position: relative; bottom: 8px;}
.contentPlayList .lForum .nMusic         { display: block; height: 45%; width: 80%; margin-left: 10px; color: #F17420; }
.contentPlayList .lForum .queueMusic     { display: inline-block; width: 48px; height: 91%; border: none; background-image: url("../images/forum.png"); background-repeat: no-repeat; }
.contentPlayList .lForum  .music:hover { background-color: #333; color: #fff;   }


.myNewForum { height: 80%; margin-top: 20px; }
.myNewForum .span5 { width: 1278px; background-color: #333; color: #F17420; }
.myNewForum select { background-color: #333; color: #F17420; }
.myNewForum textarea { margin: 0px 0px 9px; height: 150px; width: 1486px; background-color: #E7E7E7; color: #555; }
.myNewForum label { width: 15%; display: inline-block; }
.myNewForum .validForum { display: block; width: 96.5%;}
.myNewForum .validForum button { float: right; position: relative; bottom: 3px; right: -30px; margin-left: 5px; }
.noPlayList { display: none; }
.noForum { display: none !important; }


/* Profile -----------------------------------------------------*/
.navbar-inner.profile { height: 70px; line-height: 70px; font-size: 35px; padding-right: 8px; }
.navbar-inner .points {
    color: #fff;
    display: inline-block;
    width: 110px;
    height: 55px;
    margin-top: 7px;
    font-size: 20px;
    text-align: center;
    float: right;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.navbar-inner .points .number {
    display: block;
    text-align: center;
    height: 60%;
    width: 100%;
    line-height: 35px;
    font-size: 30px;
}
.navbar-inner .points .textPoints {
    display: block;
    text-align: center;
    height: 30%;
    width: 100%;
    line-height: 15px;
    font-size: 15px;
}
.bigBox .contentProfile { margin-top: 1.2%; height: 87%; padding-top: 14px; font-size: 24px; color: #6B6565; }
.bigBox .contentProfile p { margin-bottom: 40px; }
.bigBox .contentProfile strong { color: #06C; }
.bigBox .profile-contact ul { width: 100% }
.bigBox .profile-contact {
    width: 96.5%;
    display: inline-block;
    position: relative;
    bottom: -10px;
    background: url("../images/dark.jpg")
}
.listContact { width: 6%; list-style: none; float: right; }
.listContact .contactFlickr     { background-image: url("../images/social-media/contact_flickr_pb.png"); }
.listContact .contactMail       { background-image: url("../images/social-media/contact_mail_pb.png"); }
.listContact .contactSkype      { background-image: url("../images/social-media/contact_skype_pb.png"); }
.listContact .contactBlogger    { background-image: url("../images/social-media/contact_blogger_pb.png"); }
.listContact .contactMySpace    { background-image: url("../images/social-media/contact_mySpace_pb.png"); }
.listContact .contactYoutube    { background-image: url("../images/social-media/contact_youtube_pb.png"); }
.listContact .contactFacebook   { background-image: url("../images/social-media/contact_facebook_pb.png"); }
.listContact .contactTwitter    { background-image: url("../images/social-media/contact_twitter_pb.png"); }
.listContact .contactGoogle     { background-image: url("../images/social-media/contact_google_pb.png"); }

.listContact .contactFlickr:hover   { background-image: url("../images/social-media/contact_flickr.png"); }
.listContact .contactMail:hover     { background-image: url("../images/social-media/contact_mail.png"); }
.listContact .contactSkype:hover    { background-image: url("../images/social-media/contact_skype.png"); }
.listContact .contactBlogger:hover  { background-image: url("../images/social-media/contact_blogger.png"); }
.listContact .contactMySpace:hover  { background-image: url("../images/social-media/contact_mySpace.png"); }
.listContact .contactYoutube:hover  { background-image: url("../images/social-media/contact_youtube.png"); }
.listContact .contactFacebook:hover { background-image: url("../images/social-media/contact_facebook.png"); }
.listContact .contactTwitter:hover  { background-image: url("../images/social-media/contact_twitter.png"); }
.listContact .contactGoogle:hover   { background-image: url("../images/social-media/contact_google.png"); }
.contactFlickr, .contactBlogger, .contactMySpace, .contactYoutube, .contactMail, 
.contactFacebook, .contactTwitter, .contactGoogle, .contactSkype {
    height: 75px; 
    display: block; 
    background-repeat: no-repeat; 
    background-position: 10px;
    background-size: 78px;
    background-position-x: 3px;
}

  